<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>webrtc test</title>
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript" src="/javascripts/adapter.js"></script>
		<link rel='stylesheet' href='/stylesheets/call.css' />
	</head>
	<body>
		<div class="btns">
			<button onclick="start()" id="startBtn">start</button>
			<button onclick="call()" id="callBtn">call</button>
			<button onclick="hangup()" id="hangupBtn" disabled="true">hangup</button>
		</div>
		<div id="main" >
			<div id="remoteBox"  ng-controller="RemoteStreamsController as rtc">
				<div id="remoteVideosContainer">
				<video id="remoteView"></video>
			</div>
		</div>
		<div id="localBox" ng-controller="LocalStreamController as localStream">
		<video id="localView" muted="muted" autoplay="true"></video>
	</div>
</div>
</body>
<script>
var starBtn = document.getElementById('startBtn');
var callBtn = document.getElementById('callBtn');
var hangupBtn = document.getElementById('hangupBtn');

var remoteView = document.getElementById('remoteView');
var localView = document.getElementById('localView');

var localPeer;
var remotePeer;

var localStream;
var remoteStream;

//var signalingChannel = new RTCDataChannel();
var serverUri = '10.0.1.124';
var configuration = {
	iceServers:[{
		'url':'stun:' + serverUri
	},{
		'url':'turn:'+serverUri+':3478?transport=udp',
		'credential':'secret',
		'username':'demo'
	},{
		'url':'turn:'+serverUri+':3478?transport=tcp',
		'credential':'secret',
		'username':'demo'
	}]
};

function hangup(){
	hangupBtn.disabled = true;
	callBtn.disabled = false;

	localPeer.close();
	remotePeer.close();
	localPeer = null;
	remotePeer = null;

}

function call(){
	callBtn.disabled = true;
	hangupBtn.disabled = false;

	remotePeer = new RTCPeerConnection(configuration);
	localPeer = new RTCPeerConnection(configuration);
	//
	localPeer.onicecandidate = function(evt){
		var candidate = evt.candidate;
		if(candidate){
			remotePeer.addIceCandidate(new RTCIceCandidate(candidate));	
		}
		log("local candidate : " + JSON.stringify(candidate));

	}
	//
	remotePeer.onicecandidate = function(evt){
		var candidate = evt.candidate;
		if(candidate){
			localPeer.addIceCandidate(new RTCIceCandidate(candidate));	
		}
		log("remote candidate : " + JSON.stringify(candidate));
	};
	//
	remotePeer.onaddstream = function(evt){
		remoteView.src = URL.createObjectURL(evt.stream);
	}

	localPeer.addStream(localStream);

	localPeer.createOffer(function(desc){
		
		localPeer.setLocalDescription(desc);
		remotePeer.setRemoteDescription(desc);

		log("local description : "+ desc.sdp);

		remotePeer.createAnswer(function(desc){

			remotePeer.setLocalDescription(desc);
			localPeer.setRemoteDescription(desc);

			log("remote description : " + desc.sdp);

		},logError);

	},logError);


}
function start(){
	startBtn.disabled = true;
	
	var mediaOption = {
		'audio':true,
		'video':true
	};
	//get local stream
	navigator.getUserMedia(mediaOption,function(stream){
		localView.src = URL.createObjectURL(stream);
		localStream = stream;
	},logError);
}

function log(msg){
	console.log(msg);
};

//log error
function logError(error){
	console.log(error.name+":"+error.message);
}
</script>
</html>